﻿@import '../abstracts/variables';

@mixin flex-mixin ($breakpoint) {
    .d-#{$breakpoint}flex {
        display: flex !important;
    }

    .d-inline-#{$breakpoint}flex {
        display: inline-flex !important;
    }

    .flex-#{$breakpoint}row {
        flex-direction: row !important;
    }

    .flex-#{$breakpoint}row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-#{$breakpoint}column {
        flex-direction: column !important;
    }

    .flex-#{$breakpoint}column-reverse {
        flex-direction: column-reverse !important;
    }

    .flex-#{$breakpoint}wrap {
        flex-wrap: wrap !important;
    }

    .flex-#{$breakpoint}nowrap {
        flex-wrap: nowrap !important;
    }

    .flex-#{$breakpoint}wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .flex-#{$breakpoint}fill {
        flex: 1 1 auto !important;
    }

    .flex-#{$breakpoint}grow-0 {
        flex-grow: 0 !important;
    }

    .flex-#{$breakpoint}grow-1 {
        flex-grow: 1 !important;
    }

    .flex-#{$breakpoint}shrink-0 {
        flex-shrink: 0 !important;
    }

    .flex-#{$breakpoint}shrink-1 {
        flex-shrink: 1 !important;
    }

    .justify-#{$breakpoint}start {
        justify-content: flex-start !important;
    }

    .justify-#{$breakpoint}end {
        justify-content: flex-end !important;
    }

    .justify-#{$breakpoint}center {
        justify-content: center !important;
    }

    .justify-#{$breakpoint}space-between {
        justify-content: space-between !important;
    }

    .justify-#{$breakpoint}space-around {
        justify-content: space-around !important;
    }

    .align-#{$breakpoint}start {
        align-items: flex-start !important;
    }

    .align-#{$breakpoint}end {
        align-items: flex-end !important;
    }

    .align-#{$breakpoint}center {
        align-items: center !important;
    }

    .align-#{$breakpoint}baseline {
        align-items: baseline !important;
    }

    .align-#{$breakpoint}stretch {
        align-items: stretch !important;
    }

    .align-content-#{$breakpoint}start {
        align-content: flex-start !important;
    }

    .align-content-#{$breakpoint}end {
        align-content: flex-end !important;
    }

    .align-content-#{$breakpoint}center {
        align-content: center !important;
    }

    .align-content-#{$breakpoint}space-between {
        align-content: space-between !important;
    }

    .align-content-#{$breakpoint}space-around {
        align-content: space-around !important;
    }

    .align-content-#{$breakpoint}stretch {
        align-content: stretch !important;
    }

    .align-self-#{$breakpoint}auto {
        align-self: auto !important;
    }

    .align-self-#{$breakpoint}start {
        align-self: flex-start !important;
    }

    .align-self-#{$breakpoint}end {
        align-self: flex-end !important;
    }

    .align-self-#{$breakpoint}center {
        align-self: center !important;
    }

    .align-self-#{$breakpoint}baseline {
        align-self: baseline !important;
    }

    .align-self-#{$breakpoint}stretch {
        align-self: stretch !important;
    }

    .order-#{$breakpoint}first {
        order: -1 !important;
    }

    .order-#{$breakpoint}0 {
        order: 0 !important;
    }

    .order-#{$breakpoint}1 {
        order: 1 !important;
    }

    .order-#{$breakpoint}2 {
        order: 2 !important;
    }

    .order-#{$breakpoint}3 {
        order: 3 !important;
    }

    .order-#{$breakpoint}4 {
        order: 4 !important;
    }

    .order-#{$breakpoint}5 {
        order: 5 !important;
    }

    .order-#{$breakpoint}6 {
        order: 6 !important;
    }

    .order-#{$breakpoint}7 {
        order: 7 !important;
    }

    .order-#{$breakpoint}8 {
        order: 8 !important;
    }

    .order-#{$breakpoint}9 {
        order: 9 !important;
    }

    .order-#{$breakpoint}10 {
        order: 10 !important;
    }

    .order-#{$breakpoint}11 {
        order: 11 !important;
    }

    .order-#{$breakpoint}12 {
        order: 12 !important;
    }

    .order-#{$breakpoint}last {
        order: 13 !important;
    }
}


// XS >
@include flex-mixin("");

@media (min-width:$breakpoint-sm) {
    @include flex-mixin("sm-");
}

@media (min-width:$breakpoint-md) {
    @include flex-mixin("md-");
}

@media (min-width:$breakpoint-lg) {
    @include flex-mixin("lg-");
}

@media (min-width:$breakpoint-xl) {
    @include flex-mixin("xl-");
}

@media (min-width:$breakpoint-xxl) {
    @include flex-mixin("xxl-");
}